<template>

    <!-- 标题栏 -->
    <van-nav-bar fixed title="订单详情" left-arrow @click-left="router.back()">
        <template #right>
            <van-icon name="ellipsis" size="18" />
        </template>
    </van-nav-bar>

    <div class="order-detail">
        <div class="top">
            <p class="text"><span>订单状态：</span>{{ orderDetailData.orderStatusString }}</p>
            <p class="text"><span>订单编号：</span>{{ orderNo }}</p>
            <p class="text"><span>下单时间：</span>{{ orderDetailData.createTime }}</p>

            <div class="buttons" v-if="orderDetailData.orderStatusString=='已支付'">
                <button @click="confirm">确认收货</button>
                <button @click="cancel">取消订单</button>
            </div>
            <div class="buttons" v-else-if="orderDetailData.orderStatusString=='待支付'">
                <button @click="goToPurchase">去支付</button>
                <button @click="cancel">取消订单</button>
            </div>
            <div class="buttons" v-else>
                
            </div>
        </div>

        <div class="middle">
            <p class="text"><span>商品金额：</span>￥{{ orderDetailData.totalPrice }}</p>
            <p class="text"><span>配送方式：</span>普通快递</p>
        </div>

        <div class="bottom">
            <van-card v-for="item in orderDetailData.newBeeMallOrderItemVOS" :key="item.goodsId" :num="item.goodsCount"
              desc="全场包邮"  :price="item.sellingPrice" :title="item.goodsName" :thumb="item.goodsCoverImg" />
        </div>

        <!-- 弹出层 -->
        <van-popup v-model:show="showPopup" position="bottom" class="popup" round>
            <template #default>
                <div class="content">
                    <div class="payways">
                        <div class="payway" @click="goTOMyOrder(orderNo,1)">
                            <van-icon name="wechat" />
                            &nbsp;
                            <span>微信支付</span>
                        </div>
                        <div class="payway" @click="goTOMyOrder(orderNo,2)">
                            <van-icon name="alipay" />
                            &nbsp;
                            <span>支付宝支付</span>
                        </div>
                    </div>
                    
                </div>
        
        
            </template>
        </van-popup>

    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue"
import { getOrderDetailData, confirmGoods, paySuccess, cancelOrder } from '@/api/index.js'
import { useRoute, useRouter } from "vue-router";
import { showConfirmDialog, showToast } from "vant";
let route = useRoute();
let router = useRouter()

let orderNo = route.query.id;//订单编号

let orderDetailData = reactive({});

let showPopup = ref(false);
let payWay = ref([{ name: '微信支付' }, { name: '支付宝支付' }]);
onMounted(() => {
    getOrderDetailData(orderNo).then(res => {
        let { resultCode, data } = res;
        if (resultCode == 200) {
            for (let key in data) {
                orderDetailData[key] = data[key];
            }
        }
    })
})

let confirm = () => {
    showConfirmDialog({
        title: '确认收货',
        message:'请确认商品已到手，是否确认收货？'
    }).then(() => {
        confirmGoods(orderNo).then(res => {
            showToast({
                type: 'success',
                message: '确认收货成功~~',
                duration: 1500,
            })
         })
        getOrderDetailData(orderNo).then(res => {
            let { resultCode, data } = res;
            if (resultCode == 200) {
                for (let key in data) {
                    orderDetailData[key] = data[key];
                }
            }
            location.reload()
        })
    }).catch(() => {
        
    })
}

// 点击支付跳转我的订单
let goTOMyOrder = (orderNo, payType) => {
    paySuccess(orderNo, payType).then(res => {
        showToast({
            type: 'success',
            message: '支付成功~~',
            duration:1500,
        })
        showPopup.value = false
        getOrderDetailData(orderNo).then(res => {
            let { resultCode, data } = res;
            if (resultCode == 200) {
                for (let key in data) {
                    orderDetailData[key] = data[key];
                }
            }
            location.reload()
        })
    })
    
}

// 去支付
let goToPurchase = () => {
    showPopup.value=true
}

// 取消订单
let cancel = () => {
    showConfirmDialog({
        title: '取消订单',
        message: '是否取消订单？此操作无法撤回。'
    }).then(() => {
        cancelOrder(orderNo).then(res => {
            if (res.resultCode == 200) {
                getOrderDetailData(orderNo).then(res => {
                    let { resultCode, data } = res;
                    if (resultCode == 200) {
                        for (let key in data) {
                            orderDetailData[key] = data[key];
                        }
                    }
                    location.reload()
                })
            }
        })
    }).catch(() => {
        
    })
    
}
</script>

<style scoped lang="less">
.order-detail {
    background-color: #F7F7F7;
    margin-top: 1.5rem;

    .top {
        background-color: #fff;
        padding-left: .5rem;
        padding-top: .2rem;

        .text {
            font-size: .45rem;
            margin: .2rem 0;

            span {
                color: gray;
            }
        }


        .buttons {
            button {
                display: block;
                width: 95%;
                height: 1.3rem;
                font-size: .4rem;
                border: 1px solid #ccc;
                margin: .2rem 0;
                background-color: #fff;
                border-radius: .1rem;
            }

            button:first-of-type {
                color: white;
                background-color: #1BAEAE;
            }

        }
    }

    .middle {
        height: 2rem;
        background-color: #fff;
        margin-top: .5rem;
        padding-left: .5rem;
        padding-top: .2rem;

        .text {
            font-size: .45rem;
            margin: .2rem 0;

            span {
                color: gray;
            }
        }
    }

    .bottom {
        background-color: #fff;
        margin-top: .5rem;
    }

        .popup {
            .content {
                background: #F7F8FA;
    
                .payways {
                    margin-bottom: .2rem;
    
                    .payway {
                        height: 2rem;
                        width: 100%;
                        text-align: center;
                        line-height: 2rem;
                        font-size: .5rem;
                        background: white;
                    }
    
                    .payway:active {
                        background-color: #ccc;
                    }
                }
    
                .cancel {
                    height: 1.5rem;
                    line-height: 1.5rem;
                    width: 100%;
                    text-align: center;
                    font-size: .4rem;
                    background: white;
                }
    
                .cancel:active {
                    background-color: #ccc;
                }
            }
    
    
        }
}
</style>